<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
        <title>Test ISO/OSI Referenzmodell</title>
        <link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
        <style type="text/css">


        #Modell{
                width:200px;
                float:left;
                border:1px solid #000;
                background-color:#E2EBED;
                padding:3px;
                margin:2px;
                height:400px;
        }
        #Schicht{
                width:300px;

                margin:50px;
                float:left;
                height:400px;
        }
        .dragableBox,.dragableBoxRight{
                width:170px;
                height:20px;
                border:1px solid #000;
                background-color:#FFF;
                margin-bottom:6px;
                padding:10px;
                font-weight:bold;
                text-align:center;
        }
        div.dragableBoxRight{
                height:18px;
                width:160px;
                float:center;
                margin-right:5px;
                padding:2px;
                background-color:#E2EBED;
        }
        .dropBox{
                width:190px;
                border:0px;
                background-color:#E2EBED;
                height:400px;

                padding:3px;
                overflow:auto;
        }
        a{
                color:#F00;
        }

        .clear{
                clear:both;
        }
        img{
                border:0px;
        }
        </style>
        <script type="text/javascript" src="js/drag-drop-custom.js"></script>
</head>
<body>


        <div id="header"><a href="/index.html"></a></div>
        <div id="mainContainer">


                <div class="konaBody">
                </div>
                <div id="Modell">
                        <p align="center"><b>ISO/OSI Referenzmodell</b></p>
                        <div id="dropContent">
                                <div class="dragableBox" id="box1"></div>
                                <div class="dragableBox" id="box2"></div>
                                <div class="dragableBox" id="box3"></div>
                                <div class="dragableBox" id="box4"></div>
                                <div class="dragableBox" id="box5"></div>
                                <div class="dragableBox" id="box6"></div>
                                <div class="dragableBox" id="box7"></div>
                        </div>
                </div>
                <div id="Schicht">

                        <div id="box102" class="dragableBoxRight">Darstellungsschicht</div>
                        <div id="box107" class="dragableBoxRight">Bit&uuml;bertragungsschicht</div>
                        <div id="box101" class="dragableBoxRight">Anwendungsschicht</div>
                        <div id="box104" class="dragableBoxRight">Transportschicht</div>
                        <div id="box105" class="dragableBoxRight">Vermittlungsschicht</div>
                        <div id="box103" class="dragableBoxRight">Kommunikationsschicht</div>
                        <div id="box106" class="dragableBoxRight">Sicherungsschicht</div>



                </div>
                <div class="clear"></div>
                <div class="konaBody"></div>
        </div>

<div id="debug"></div>
<script type="text/javascript">

// Custom drop action for the country boxes
function dropItems(idOfDraggedItem,targetId,x,y)
{
        var targetObj = document.getElementById(targetId);        // Creating reference to target obj
        var subDivs = targetObj.getElementsByTagName('DIV');        // Number of subdivs
        if(subDivs.length>0 && targetId!='Modell')return;        // Sub divs exists on target, i.e. element already dragged on it. => return from function without doing anything
        var sourceObj = document.getElementById(idOfDraggedItem);        // Creating reference to source, i.e. dragged object
        var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1;        // Find numeric id of target
        var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1;        // Find numeric id of source
        if(numericIdSource-numericIdTarget==100){        // In the html above, there's a difference in 100 between the id of the country and it's capital(example:
                                                                                                // Oslo have id "box1" and Norway have id "box101", i.e. 1 + 100.
                sourceObj.style.backgroundColor='#0F0';        // Set green background color for dragged object
        }else{
                sourceObj.style.backgroundColor='';        // Reset back to default white background color
        }
        if(targetId=='Modell'){        // Target is the capital box - append the dragged item as child of first sub div, i.e. as child of <div id="dropContent">
                targetObj = targetObj.getElementsByTagName('DIV')[0];
        }
        targetObj.appendChild(sourceObj);        // Append
}



var dragDropObj = new DHTMLgoodies_dragDrop();        // Creating drag and drop object

// Assigning drag events to the Schicht
dragDropObj.addSource('box101',true);        // Make <div id="box101"> dragable. slide item back into original position after drop
dragDropObj.addSource('box102',true);        // Make <div id="box102"> dragable. slide item back into original position after drop
dragDropObj.addSource('box103',true);        // Make <div id="box103"> dragable. slide item back into original position after drop
dragDropObj.addSource('box104',true);        // Make <div id="box104"> dragable. slide item back into original position after drop
dragDropObj.addSource('box105',true);        // Make <div id="box105"> dragable. slide item back into original position after drop
dragDropObj.addSource('box106',true);        // Make <div id="box106"> dragable. slide item back into original position after drop
dragDropObj.addSource('box107',true);        // Make <div id="box107"> dragable. slide item back into original position after drop


// Assigning drop events on the countries
dragDropObj.addTarget('box1','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box2','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box3','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box4','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box5','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box6','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box7','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('Schicht','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop

dragDropObj.init();        // Initizlizing drag and drop object
</script>
</body>
</html>